<template>
  <el-dialog v-model="deleteVisible" width="50%" align-center class="Vdialog" @close="cancel"
    :close-on-click-modal="false">
    <template #header>
      <h4 class="dialogName">操作记录</h4>
    </template>
    <div class="content">
      <div>
        <vxe-table :data="tableData" :round="true" border height="400">
          <template v-if="type == 'modify'">
            <vxe-column field="update_key" title="修改项"></vxe-column>
            <vxe-column field="update_before_value" title="修改前"></vxe-column>
            <vxe-column field="update_after_value" title="修改后"></vxe-column>
          </template>
          <template v-if="type == 'operation'">
            <vxe-column field="op_type_cn" title="操作类型">
              <template #default="{ row }">
                {{ row.op_type_cn || row.type_cn }}
              </template>
            </vxe-column>
          </template>
          <template v-if="type == 'distribution'">
            <vxe-column field="content" title="修改内容"></vxe-column>
          </template>
          <vxe-column field="create_user" title="操作人"></vxe-column>
          <vxe-column field="create_time" title="操作时间"></vxe-column>
          <template v-if="type == 'operation'">
            <vxe-column field="content" title="备注"></vxe-column>
          </template>
        </vxe-table>
      </div>
      <!-- <vxe-pager v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :total="page.totalResult"
        :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
        @page-change="pageChange">
      </vxe-pager> -->
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button type="" @click="cancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="VLog">
import { reactive, toRefs } from 'vue'
const emits = defineEmits(['cancel'])
// 声明接收参数
const props = defineProps({
  api: {
    type: Function,
    default: () => ([])
  },
  options: {
    type: String,
    default: 'id'
  },
  type: {
    type: String,
    default: 'modify'  //modify 修改项 // 操作类型 operation  // distribution 
  }
})
const data = reactive({
  deleteVisible: false,
  page: {
    pageNum: 1,
    pageSize: 10,
    totalResult: 0
  },
  tableData: [],
  ids: 0
})
const { deleteVisible, page, tableData, ids } = toRefs(data)
const { api, options } = toRefs(props)
const open = (id) => {
  ids.value = id
  const obj = {}
  obj[options.value] = id
  api.value(obj).then(res => {
    tableData.value = res.data
    page.value.totalResult = res.total
  })
  deleteVisible.value = true
}
const cancel = () => {
  deleteVisible.value = false
  emits('cancel')
}
//分页
const pageChange = () => {
  api.value({ id: ids.value, pageSize: page.value.pageSize, pageNum: page.value.pageNum }).then((res) => {
    tableData.value = res.data
    page.value.totalResult = res.total
  })
}
defineExpose({
  open, data, cancel
})
</script>
<style lang="scss" scoped>
.content {
  align-items: center;
  margin: 20px;
}

.dialogName {
  font-size: 16px;
  font-weight: bold;
}

.dialog-button {
  text-align: center !important;
}
</style>